<script lang="ts" setup>
import { Message } from '@arco-design/web-vue'
// import {
//   getApiConfigCdnPortApi,
//   updateApiConfigCdnPortApi,
// } from '@/apis/modules/config'

import { getCdnHttpApi, updateCdnHttpApi } from '@/apis/modules/cdn.ts'

const formState = reactive({
  http: '',
  https: '',
})

function getPortConf() {
  getCdnHttpApi({}).then((res) => {
    formState.http = res?.http_ports.http?.join('\n')
    formState.https = res?.http_ports.https?.join('\n')
  })
}
const loading = ref(false)
function save() {
  const data = {
    http: formState.http?.split('\n').filter(Boolean),
    https: formState.https?.split('\n').filter(Boolean),
  }
  loading.value = true
  updateCdnHttpApi(data)
    .then(() => {
      Message.success('操作成功')
      getPortConf()
    })
    .finally(() => (loading.value = false))
}
onMounted(() => {
  getPortConf()
})
</script>

<template>
  <main-container :show-pagination="false">
    <!-- <template #header /> -->
    <a-alert style="border-radius: 8px">
      <template #icon>
        <i-icons-sigh />
      </template>
      <div class="text-[12px] text-[#4E5969] leading-[18px]">
        1. 仅限节点作为来访端口使用。<br>
        2. HTTP 与 HTTPS 服务默认使用 80 与 443 端口，系统预留 9980 至 9989
        端口。<br>
        3. 其他可配置端口有效范围为 1024 至 65535，请确保各端口区间互不重叠。<br>
        4. 如配置多个端口，请用换行分隔。
      </div>
    </a-alert>
    <a-form
      :model="formState"
      layout="vertical"
      class="mt-6 w-100!"
    >
      <a-form-item label="HTTP 端口">
        <a-textarea
          v-model="formState.http"
          placeholder="例如：
4015
4016-4085"
        />
      </a-form-item>
      <a-form-item label="HTTPS 端口">
        <a-textarea
          v-model="formState.https"
          placeholder="例如：
5015
5016-5085"
        />
      </a-form-item>
      <a-button
        type="primary"
        class="w-fit"
        :loading="loading"
        @click="save"
      >
        保存配置
      </a-button>
    </a-form>
  </main-container>
</template>

<style lang="less" scoped>
.arco-alert {
  align-items: start;
  color: var(--color-text-2);
  :deep(.arco-alert-icon) {
    width: 16px;
    height: 22px;
    line-height: 22px;
  }
  :deep(.arco-alert-content) {
    line-height: 22px;
    font-size: 14px;
  }
}
:deep(.arco-textarea) {
  min-height: 110px;
}
</style>
